<template>
  <div class="my_data">
    <div class="header">
      <h3>管理我的账号</h3>
      <div class="card">
        <div class="img">
          <img :src="userInfo.avatar" alt="" />
         
            <input
              type="file"
              accept="image/*"
              @change="onFileChange"
              ref="file"
            />
        

          <i></i>
        </div>
        <div class="info">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div class="phone">绑定手机号:{{ userInfo.phone }}</div>
        </div>
        <div class="cur">当前账号</div>
      </div>
    </div>
    <div class="txt">
      <div class="inp_item">
        <div class="inf">昵称</div>
        <div class="input_box">
          <input type="text" v-model="nickname" />
        </div>
      </div>
      <div class="inp_item">
        <div class="inf">ID号</div>
        <div class="input_box">
          <input type="text" :value="userInfo.uid" disabled /><i></i>
        </div>
      </div>
      <div class="inp_item">
        <div class="inf">手机号码</div>
        <div class="input_box">
          <input type="text" :value="userInfo.phone" disabled /><i></i>
        </div>
      </div>
      <div class="inp_item">
        <div class="inf">密码</div>
        <div class="input_box">
          <input type="text" value="点击修改密码" @click="goChangePsw" />
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="saveBtn" @click="clickSave">保存修改</div>
      <div class="exitBtn" @click="loginOut1">退出登录</div>
    </div>

    <img src="C:\fakepath\Snipaste_2021-11-15_10-05-41.png" alt="" />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { Toast } from "vant";
import { getUser } from "@/utils/user.js";
export default {
  name: "UserData",
  data() {
    return {
      userInfo: {},
      avatar: "",
      nickname: "",
    };
  },
  created() {
    getUser().then((res) => {
      console.log(res.data);
      this.userInfo = res.data.data;
      this.nickname = res.data.data.nickname;
    });
    // this.initUser()
  },
  computed: {},
  methods: {
    ...mapMutations("login", ["loginOut"]),
    loginOut1() {
      this.loginOut();
      this.$router.push("/index");
    },
    initUser() {
      let token = localStorage.getItem("token");
      let url = "/api/user";
      let pro = axios({
        url: url,
        method: "get",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          let { status, data } = res.data;
          if (status == 200) {
            let obj = {
              nickname: data.nickname,
              uid: data.uid,
              phone: data.phone,
              avatar: data.avatar,
            };

            this.userInfo = obj;
            this.nickname = obj.nickname;
          }
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    clickSave() {
      let token = localStorage.getItem("token");
      let url = "/api/user/edit";
      let data = {
        avatar: this.userInfo.avatar,
        nickname: this.nickname,
      };
      let pro = axios({
        url: url,
        method: "post",
        data: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          Toast.success("修改成功");
          this.$router.push("/user");
          console.log(res.data);
        })
        .catch((err) => {
          this.$toast.show("修改失败", 1500);
          console.log("失败");
        });
    },

    goChangePsw() {
      this.$router.push("/change_password");
    },

    // 上传图片文件
    uploadImg() {
      let token = localStorage.getItem("token");
      let url = "/api/upload/image";

      let pro = axios({
        url: url,
        method: "post",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          alert("成功");
          console.log(res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    onFileChange() {
      let file = this.$refs.file.files[0]
      console.log(typeof file)
      let fd = new FormData();
      fd.append("file", file );

      console.log(fd);

      let token = localStorage.getItem("token");
      let url = "/api/upload/image";

      let pro = axios({
        url: url,
        method: "post",
        data: fd,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          let {status,data} = res.data
          if(status == 200){
            this.userInfo.avatar = data.url
          }else{
            this.$toast.show("上传失败",1000)
          }
        })
        .catch((err) => {
          console.log("失败");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  background-color: #fff;
  margin: 5px 0;
  padding: 18px 15px 6.5px;
  h3 {
    color: #282828;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
  }
  .card {
    height: 80px;
    border-radius: 10px;
    padding: 0 15px;
    border: 1px solid #e93323;
    width: 100%;
    display: flex;
    align-items: center;
    background: url(../../../assets/icon/user/data_bg.png) no-repeat;
    background-size: 100% 100%;
    background-color: #fff9f9;
    overflow: hidden;
    position: relative;
    margin-bottom: 11px;

    .img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      // overflow:hidden ;
      //   border: 1px solid red;
      position: relative;
      > img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
      > i {
        position: absolute;
        right: -1px;
        bottom: -3px;
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url(../../../assets/icon/user/data_bi.png) no-repeat;
        background-size: 100% 100%;
      }

      > input {
        position: absolute;
        top: 0;
        left: 0;
        outline: none;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .info {
      margin-left: 15px;
      width: 250px;
      .nickname {
        font-size: 15px;
        color: #282828;
      }
      .phone {
        font-size: 12px;
        color: #999;
      }
    }
    .cur {
      position: absolute;
      right: 0;
      top: 0;
      width: 70px;
      height: 22px;
      background-color: rgba(233, 51, 35, 0.1);
      line-height: 22px;
      font-size: 14px;
      color: #fc4141;
      text-align: center;
      border-bottom-left-radius: 13px;
    }
  }
}
.txt {
  margin-top: 6px;
  background: #fff;
  padding-left: 15px;
  margin-bottom: 35px;
  .inp_item {
    height: 51px;
    border-bottom: 1px solid #f2f2ff;
    padding-right: 15px;
    color: #282828;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .inf {
      font-size: 16px;
    }
    .input_box {
      > input {
        border: 0;
        outline: none;
        text-align: right;
        font-size: 16px;
        color: #888;
        background-color: #fff;
      }
      > i {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: url(../../../assets/icon/user/data_suo.png) no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
        margin-left: 5px;
      }
    }
  }
}

.btns {
  > div {
    width: 345px;
    height: 45px;
    border: 1px solid #e93323;
    border-radius: 22.5px;
    font-size: 17px;
    line-height: 45px;
    text-align: center;
    margin: 18px auto 0px;
  }
  .saveBtn {
    background-color: #e93323;
    color: #fff;
  }
  .exitBtn {
    color: #e93323;
  }
}
</style>